<template>
    <div id="mains" class="mains forgrt">
        <div class="register" id="register">
            <section class="order-main-header">
                <mt-header title="">
                <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
                </mt-header>
            </section>
            <dl class="user-title">
                <dt></dt>
                <dd>
                    <span class="no">忘记密码</span>
                    <span class="changeway-btn" v-show="forPhone" @click="changway">使用邮箱重置</span>
                    <span class="changeway-btn" v-show="!forPhone" @click="changway">使用手机重置</span>
                </dd>
            </dl>
            <dl class="login-logo">
                <img src="../../assets/login-logo.png">
            </dl>
            <div class="user-form">
                <div class="user-input-group" v-show="forPhone">
                    <div class="areaCode">+86</div>
                    <input growing-ignore="true" name="name" v-model="resetData.name" placeholder="请输入手机号码">
                </div>
                <div class="user-input-group" v-show="!forPhone">
                    <input growing-ignore="true" name="name" v-model="resetData.name" placeholder="请输入邮箱">
                </div>
                <div class="user-input-group keycode-group">
                    <input growing-ignore="true" name="code" v-model="resetData.code" placeholder="请输入验证码">
                    <div class="keycodeBtn" @click="getCode" :style="btnColor">
                      {{keycodeTip}}
                    </div>
                </div>
                <div class="user-input-group">
                    <input growing-ignore="true" name="pwd" v-model="resetData.pwd" placeholder="请设置新的登录密码" type="password">
                </div>
                <div id="captcha_wrap">
                </div>
                <div class="user-submit-group">
                    <button class="user-submit" @click="sureReset()">
                        <span>重置密码</span>
                    </button>
                </div>
            </div>
            <div class="toRegister">已有账号，<router-link to="/login">立即登录</router-link></div>
        </div>
        <!-- 滑块 -->
        <Geet :isGeet="isgt" @geetPath="GeetPath" @clickChange="GeetChange"></Geet>
    </div>
</template>

<script>
import Geet from "./Geet.vue";
  import { Toast } from 'mint-ui';//导入toast组件
export default {
    data(){
        return{
            checkType: false,
            forPhone: true,
            resetData:{
                name:'',
                code:'',
                pwd:'',
            },
            changewayData:"使用邮箱重置",
            keycodeTip:'获取验证码',
            btnColor:'color:#5298f1',
            isgt:false,
        }
    },
    components: {
        Geet
    },
    methods:{
         handleClose(){
           this.$router.go(-1);
      },
        checkFun() {
            if(!this.checkType){
                this.checkType = true

            }else{
                this.checkType = false
            }
        },
        changway() {
            this.forPhone = this.forPhone? false: true
            this.resetData.name = ''
        },
        getCode() {
            let reg
            let data = this.resetData
            if(this.forPhone){
                reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
            }else{
                reg = /^[A-Za-z0-9\u4e00-\u9fa5_]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            }
            if(!data.name){
                Toast('用户名不能为空')
                return
            }else if(!reg.test(data.name)){
                Toast('格式不正确')
                return
            }
            this.isgt = !this.isgt;
        },
        GeetChange(val) {
            this.isgt = val;
        },
        GeetPath(val) {
            this.isgt = false;
            this.$http.post('/v1/sendFindCode',{
                name:this.resetData.name,
                areaCode:'+86'
            }).then(res=>{
                res = res.data
                if(res.code == 200){
                this.keycodeTip = 60
                this.btnColor = 'color:#ddd'
                var timeId = setInterval(function(){
                  this.keycodeTip--
                  if(this.keycodeTip == 0){
                    clearInterval(timeId)
                    this.btnColor = 'color:#5298f1'
                    this.keycodeTip = '获取验证码'
                  }
                }.bind(this),1000)
              }else if(res.code == 1){
                Toast('非法请求')
              }else if(res.code == 4){
                Toast('账号已被注册或绑定')
              }else if(res.code == 6){
                Toast('账号已被禁用')
              }else if(res.code == 5){
                Toast('账号未注册')
              }
            }).catch(err=>{

            })
        },
        sureReset() {
            if(!this.resetData.name){
                Toast('用户名不能为空')
                return
            }
            if(!this.resetData.code){
                Toast('请输入验证码')
                return
            }
            if(!this.resetData.pwd){
                Toast('密码不能为空')
                return
            }else if(!/^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{8,20}$/.test(this.resetData.pwd)) {
                Toast('密码至少包括两种类型，长度为8-20位')
                return;
            }
            this.$http.post('/v1/findPwd',this.resetData).then(res=>{
                res = res.data
                if(res.code == 200){
                    Toast('密码重置成功')
                    this.$router.push('/login')
                }else if(res.code == 100){
                    Toast('请先发送验证码')
                }else if(res.code == 101){
                    Toast('发送验证码频繁，请2小时候再试')
                }else if(res.code == 102){
                    Toast('验证码错误，剩余可尝试次数为'+res.data+'次')
                }else if(res.code == 104){
                    Toast('新密码不能和旧密码一致')
                }else if(res.code == 105){
                    Toast('新密码不能和交易密码一致')
                }
            }).catch(err=>{
                console.warn(err)
            })
        }
    }
}
</script>

<style lang="less">
   #register{
        font-size: 16px;
    }
    .register  .login-logo{
        height: 160px;
        line-height: 160px;
        width: 100%;
        text-align: center;
        img{
             width: 80px;
            height: 80px;
        }
    }
    .user-top {
        height: 50px;
        line-height: 50px;
        padding: 0 60px;
    }
    .user-title{
        font-size: 24px;
        font-family:PingFang SC;
        font-weight:bold;
        color:#282828;
        padding-left: 50px;
        padding-right: 53px;
        dd{
            width: 100%;
            display: flex;
            justify-content: space-between;
             color: #E0E0F9;
        }
        .changeway-btn{
            color: rgba(82, 152, 241, 1);
            font-size: 14px;
            margin-top: 10px;
        }
    }
    .user-form{
        width: 100%;
    }
    .user-input-group {
             padding-bottom: 1px;
        border-bottom: 1px solid #8686c0;
        margin: 16px 20px 0;
        height: 50px;
        display: flex;
        input {
            border:none;
             outline: none;
            width: 100%;
            line-height: 50px;
            height:50px;
            font-size: 16px;
              color: rgba(134, 134, 192, 1);
            // margin-bottom: 57px;
            padding-left: 19px;
            background: #161736;
        }
    }
   .forgrt #captcha_wrap{
        margin: 27px 0 0 60px;
        #checkbox{
            width: 26px;
            height: 26px;
            border: 1px solid #DCDCDC;
            vertical-align: middle;
            display: inline-block;
        }
        .active-bgc{
            background-color: rgba(82, 152, 241, 1);
        }
    }
    .areaCode{
        width: 62px;
        border-right: none;
        line-height: 40px;
        padding-left: 20px;
        height: 40px;
        color: #E0E0F9;

    }
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
        color: rgba(134, 134, 192, 1);
        letter-spacing: 1px;
        font-size: 14px;
    }
    ::-moz-placeholder { /* Firefox 19+ */  
        color: rgba(134, 134, 192, 1);
        letter-spacing: 1px;
        font-size: 14px;
    }
    :-ms-input-placeholder { /* IE 10+ */ 
        color:rgba(134, 134, 192, 1);
        letter-spacing: 1px;
        font-size: 14px;
    }
    :-moz-placeholder { /* Firefox 18- */ 
        color:rgba(134, 134, 192, 1);
        letter-spacing: 1px;
        font-size: 14px;
    }
    .keycode-group{
        .keycodeBtn{
            width: 250px;
            height: 100%;
            text-align: center;
           
            border-left: none;
            line-height: 48px;
            color:rgba(82, 152, 241, 1)
        }
    }
    .user-submit-group {
        height: 50px;
        padding: 2px 60px 0;
        display: flex;
        justify-content: center;
    }
    .user-submit-group button.disabled, .user-submit-group button:disabled {
        background: #c5cfd5;
    }

    .user-submit-group button {
        width: 90%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: rgba(82, 152, 241, 1);
        border-radius:3px;
        font-size: 16px;
        color: #fff;
        margin: 0 auto;
    }
    button {
        border: none;
        outline: none;
        -webkit-appearance: none;
        background: transparent;
    }
    .toRegister{
        margin-top: 26px;
        text-align: center;
        color:#999999;
        a{
            text-decoration: none;
            color:rgba(82, 152, 241, 1)
        }
    }
    #captcha_wrap {
    padding: 6px 52px;
     color: #E0E0F9;
    font-size: 14px;
    display: flex;
    justify-content: center;
    text-decoration:underline;
}
.mint-header{
    height: 40px;
    font-size: 16px;
    background-color: #161736;
    color: #E0E0F9
}
.order-main-header{
    height: 50px;
}
</style>